<script src="../node_modules/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app"></div>

<script>
Vue.component('store-consumer', {
  // Implement this
})

const Component = {
  props: ['foo', 'bar'],
  template: `
    <div>
      <store-consumer>
        <div slot-scope="{ state, getters }">
          <p>Foo is: {{ state.foo }}</p>
          <p>Bar is: {{ getters.bar }}</p>
        </div>
      </store-consumer>
    </div>
  `
}

const store = new Vuex.Store({
  state: {
    foo: 'This is foo'
  },
  getters: {
    bar () {
      return 'This is bar'
    }
  }
})

const app = new Vue({
  el: '#app',
  store,
  render: h => h(Component)
})
</script>
